<template>
	<view class="root">
		<view class="head">
			<view class="flex align-center" style="width: 750rpx; height: 220rpx; padding-top: 60rpx; background-color: #FFFFFF;">
				<view @tap="change(0)" style="position: relative;" class="  choice flex1">
					<view v-if="AllNoticeNoRead > 0" class="dian">
						{{AllNoticeNoRead}}
					</view>
					<icon style="filter: hue-rotate(0deg); position: relative; z-index: 100;" :class="current == 0 ? 'checked':''"
					 class="  icon-my iconfont icon-xiaoxi"></icon>
					<view>通知</view>
				</view>
				<view @tap="change(1)" style="position: relative;" class=" choice flex1">
					<view v-if="AllAnnNoticeListNoRead > 0" class="dian">
						{{AllAnnNoticeListNoRead}}
					</view>
					<icon style="filter: hue-rotate(50deg);" :class="current == 1 ? 'checked':''" class="icon-my iconfont icon-gonggao"></icon>
					<view>公告</view>
				</view>
				<view @tap="change(2)" style="position: relative;" class=" choice flex1">
					<view v-if="AllNeedNoticeListNoRead > 0" class="dian" >
						{{AllNeedNoticeListNoRead}}
					</view>
					<icon style="filter: hue-rotate(100deg);" :class="current == 2 ? 'checked':''" class="icon-my iconfont icon-qiepian6"></icon>
					<view>待办</view>
				</view>
			</view>
		</view>
		<!-- <tg-slide @changeChoice="change" :tipList="tipList" style="width: 600rpx; margin: 20rpx auto;"></tg-slide> -->
		<view v-if="current == 0 && AllNotice.length > 0">
			<notice v-for="(item,index) in AllNotice" :key="index" :item="item" style="width: 100%;"></notice>
		</view>
		<view v-else-if="current == 1 && AllAnnNoticeList.length > 0">
			<notice v-for="(item,index) in AllAnnNoticeList" :key="index" :item="item" style="width: 100%;"></notice>
		</view>
		<view v-else-if="current == 2 && AllNeedNoticeList.length > 0">
			<notice v-for="(item,index) in AllNeedNoticeList" :key="index" :item="item" style="width: 100%;"></notice>
		</view>
		<view style="width: 750rpx; height: 750rpx;" v-else>
			<image style=" transform: translate(-50%,-50%); width: 350rpx; height: 350rpx; position: fixed; top: 50%; left: 50%;"
			 src="../../static/icon/nonotice.png"></image>
		</view>
	</view>
</template>

<script>
	import tgSlide from "../../components/ui/tg-slide.vue"
	import notice from "../../components/ui/page/notice-list-item.vue"
	export default {
		components: {
			tgSlide,
			notice
		},
		computed: {
			AllNotice() {
				return this.$store.state.notice.AllNotice;
			},
			AllNeedNoticeList() {
				return this.$store.state.notice.AllNeedNoticeList
			},
			AllAnnNoticeList() {
				return this.$store.state.notice.AllAnnNoticeList
			},
			AllNoticeNoRead() {
				return this.$store.state.notice.AllNoticeNoRead;
			},
			AllNeedNoticeListNoRead() {
				return this.$store.state.notice.AllNeedNoticeListNoRead
			},
			AllAnnNoticeListNoRead() {
				return this.$store.state.notice.AllAnnNoticeListNoRead
			},
		},
		data() {
			return {
				current: 0,
				tipList: [{
						content: '通知',
						color: '#63C3FF',
					},
					{
						content: '公告',
						color: '#63C3FF'
					},
					{
						content: '待办',
						color: '#63C3FF'
					},
				]
			}
		},
		async onShow() {
			//修改未读消息数
			await this.$store.dispatch('rushNoRead');
		},
		async onReachBottom() {
			//console.log("加载下一页");
			var current = this.current;
			var type = (current == 0 ? 'AllNotice' : (current == 1 ? 'AllAnnNoticeList' : 'AllNeedNoticeList'))
			this.$store.dispatch("getNextPage", {
				type
			});

		},
		methods: {
			async change(e) {
				//console.log(this.AllNeedNoticeList)
				this.current = e
				this.$store.dispatch('getNotice', {});
			},
		}
	}
</script>

<style scoped>
	.dian {
		z-index: 101;
		border-radius: 50%;
		color: #FFFFFF;
		width: 60rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 25rpx;
		position: absolute;
		right: 50rpx;
		top: 20rpx;
		background-color: #FF7070;
	}

	.checked {
		transform: scale(1.2);
	}

	.choice {
		text-align: center;
		line-height: 75rpx;
	}

	.icon-my {
		color: #4DBAFF;
		font-size: 80rpx !important;
		display: block;

		margin-top: 50rpx;
	}

	.head {
		width: 750rpx;
		position: fixed;
		top: 0;
		height: 300rpx;
		background-color: #C8C7CC;
	}

	.my-icon {
		color: #888888;
		font-size: 100rpx;
		text-align: center;
		width: 750rpx;
		position: absolute;
		top: 40%;
		left: 0;
		animation: loding 2s;
		animation-iteration-count: infinite;
	}

	@keyframes loding {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.root::before {
		content: "";
		width: 700rpx;
		height: 300rpx;
		display: block;
	}

	.root::after {
		content: "";
		width: 700rpx;
		height: 100rpx;
		display: block;
	}
</style>
